<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="../css/icon.css"/>
<link rel="stylesheet" type="text/css" href="../css/btn.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="../js/jquery.filedrop.js"></script>
<script>
var  c= console.log ;
$(document).ready(function(e) {

		$(".droparea").fileupload({
				maxfiles: 1
				,maxfilesize:1000
				,queuefiles:0	
				,refresh:1
				,allowedfiletypes:['image/jpeg','image/png','image/gif','application/x-zip']
				,dragOver:function(e){ //c('dragOver',this,e)	
					$(this).addClass('dragover') 
				}
				,dragLeave:function(e){ //c('dragLeave',this,e)	
					$(this).removeClass('dragover') 					
				}
				,drop:function(e){ //c('drop',this,e)	
					$(this).removeClass('dragover') 
				}
				,beforeEach :function(file){ //c("beforeEach",this,file);
					f = $('<div class="file '+file.name.replace(/[^a-zA-Z0-9]+/g,'-')+'"><progress></progress>'+file.name+'</div>');
					if (this.maxfiles == 1){
						this.droparea.find('.files').html(f);
					}else{
						this.droparea.find('.files').append(f);
					}
				}
				,uploadFinished:function(i,ofile,res){		//	c('uploadFinish',this,file);	
					f = this.droparea.find("."+ofile.name.replace(/[^a-zA-Z0-9]+/g,'-'))
					f.find("progress").hide()	
					
					for(fileinput in res.files){
						for(var i=0;i<res.files[fileinput].length;i++){
							file = res.files[fileinput][i]
							if (file.error == 0){
								f.html('<img src="'+res.virtual_path + file.uploaded+'" alt="alt:'+file.uploaded+'" style="max-height:100px;max-width:100px;" />'
								+'<input type="hidden" name="' +fileinput +'" value="'+file.uploaded+'" />');
							}else{
								alert(file.error_msg);
							}
						}
					}
				}
				,progressUpdated:function(progress,file){ //c('progress',this,progress,x);
					f = this.droparea.find("."+file.name.replace(/[^a-zA-Z0-9]+/g,'-'))
					f.find('progress').attr({value:progress,max:100})
				}
				,error:function(err,file, i){
					alert("Error : "+ err)
					//c('error',this,err,file,i)  //["BrowserNotSupported", "TooManyFiles", "FileTooLarge", "FileTypeNotAllowed", "NotFound", "NotReadable", "AbortError", "ReadError"]
				}
		});
	
	$("form").submit(function(){
		c($(this).serialize()) ;
		return false;	
	})
});
</script>
<style>
.droparea{ padding:30px; background:#FFC}
.dragover{ background:#0C3;}
.droparea .files{ clear:both; padding-top:3px;}
</style>
</head>

<body>
<form >
<div class="droparea">	
    <span class="btn btn-mini btn-file"  >
    <i class="icon-plus icon"></i>  Add files...	<input  name="fileu" type="file" data-url="upload.php" />
    </span>
    <div class="files"></div>
</div>
<div class="droparea">	
    <span class="btn btn-mini btn-file"  >
    <i class="icon-plus icon"></i>  Add files...	<input  name="fisleu" type="file" data-url="upload.php" />
    </span>
    <div class="files"></div>
</div>
<div class="droparea">	
    <span class="btn btn-mini btn-file"  >
    <i class="icon-plus icon"></i>  Add files...	<input  name="filqeux" type="file" data-url="upload.php" />
    </span>
    <div class="files"></div>
</div>
<button class="btn" type="submit" >Send Form</button>
</form>
<div class="droparea">	
    <span class="btn btn-mini btn-file"  >
    <i class="icon-plus icon"></i>  Add files...	<input  name="filqedsdu" type="file" data-url="upload.php" />
    </span>
    <div class="files"></div>
</div>
</body>
</html>
